<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../../css/css.css" />
		<style type="text/css">
			body,
			.mui-content {
				background-color: #FFFFFF;
			}

			.mui-bar .mui-title {
				right: 80px;
				left: 80px;
			}

			.yxj-row,
			.yxj-rowxb,
			.yxj-rowxl {
				width: 92%;
				margin-left: 4%;
				padding: 10px;
				border-bottom: 1px solid #eaeaea;
				position: relative;
			}

			.marbtm {
				margin-bottom: 3px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.colorA3A3A3 {
				color: #A3A3A3;
			}

			.color1A5186 {
				color: #1A5186;
			}

			.flex {
				display: flex;
			}

			.justcnt {
				justify-content: space-between;
			}

			.fontsize13 {
				font-size: 13px;
			}

			.fontsize14 {
				font-size: 14px;
			}

			.fontsize15 {
				font-size: 15px;
			}

			.dsh-btn {
				color: #ffffff;
				background-color: #1A5186;
				border-radius: 3px;
				width: 80px;
				padding: 2px 0px;
				text-align: center;
				position: absolute;
				right: 10px;
				top: 45px;
				font-size: 13px;
			}
			.dsh-btn1 {
				color: #A4A4A4;
				border:1px solid #cccccc;
				border-radius: 3px;
				width: 80px;
				padding: 2px 0px;
				text-align: center;
				position: absolute;
				right: 10px;
				top: 45px;
				font-size: 13px;
			}

			.dsh-btnlock {
				background-color: #eee;
				border: 1px solid #1A5186;
				color: #1A5186;
			}

			.dsh-btnxb {
				top: 65px;
			}

			.wifi {
				width: 80%;
				margin: 100px auto;
				text-align: center;
			}

			.wifi img {
				width: 80%;
				margin-right: 20px;
			}

			.wifi p {
				font-size: 1rem;
			}

			[v-cloak] {
				display: none;
			}

			.tabbtn {
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: space-evenly;
				margin-top: 5px;
			}

			.tabbtn div {
				width: 80px;
				height: 36px;
				line-height: 36px;
				text-align: center;
				font-size: 14px;
			}

			.tabbtn .active {
				color: #1A5186;
				border-bottom: 2px solid #004A86;
			}

			.red {
				color: red
			}

			.yellow {
				color: goldenrod;
			}

			.gray {
				background-color: darkgray;
			}

			.scanfix {
				position: fixed;
				bottom: 10px;
				width: 40%;
				margin-left: 30%;
				display: none;
				text-align: center;
			}

			.line2 {
				width: 100%;
				height: 3px;
				background-color: #eaeaea;
				margin: 1px;
			}

			.mui-bar-nav,
			.mui-bar {
				box-shadow: 0px 0px 0px #ccc;
				-webkit-box-shadow: 0px 0px 0px #ccc;
			}

			.color1A5186 {
				color: #1A5186;
			}

			.xjperson {
				width: 70px;
				font-size: 14px;
				text-align: left;
			}

			.ppset {
				text-align: center;
				font-size: 14px;
				border-radius: 2px;
				width: 50px;
				height: 25px;
				line-height: 25px;
				color: #1A5186;
				border: 1px solid #1A5186
			}

			.ppshow {
				width: 100%;
				padding: 10px 10px 0;
				text-align: center;
			}

			.arrowshow {
				width: 100%;
				height: 16px;
				text-align: center;
			}

			.ppselect {
				background-color: #f7f7f7;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.deleteme{
				position: relative;
				border: 1px solid #696C76;
				padding: 0px 7px;
				border-radius: 3px;
				margin-right: 3px;
			}
			.deleteimg{
				position: absolute;
				top: 0px;
				right: 0px;
			}
			.mtop3{
				margin-bottom: 3px;
			}
			.zhs{
				width: 100%;
				display: flex;
				justify-content: space-between;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">草稿箱</h1>
		</header>
		<div class="mui-content" id="content" v-cloak>
			<div class="tabbtn">
				<div @click="getTabtn('1')" :class="tabindex == '1' ? 'active' : ''">升压站巡检</div>
				<div @click="getTabtn('2')" :class="tabindex == '2' ? 'active' : ''">设备巡检</div>
				<div @click="getTabtn('3')" :class="tabindex == '3' ? 'active' : ''">线路巡检</div>
			</div>
			<div class="line2"></div>
			<div v-if="tabindex == 1" class="mui-row yxj-row" v-for="(item,index) in data" :key="index">
				<div class="yxj-row-1" @click="getChildPage(item)">
					<div class="marbtm flex justcnt">
						<span class="fontsize15">{{changeState(item.name)}}</span>
						<span class="color1A5186 fontsize15" v-show="item.realname">执行人:{{item.realname}}</span>
						<div>
							<span class="dsh-btn">巡检中</span>
						</div>
					</div>
					<div class="colorA3A3A3 fontsize13">开始时间：{{item.start_time}}</div>
					<div class="colorA3A3A3 fontsize13" :class="getCheckTime(item.latestcompletetime)">
						最晚完成时间：{{item.latestcompletetime}}</div>
				</div>
			</div>
			<div class="submitparent">
				<div v-if="tabindex == 2" class="mui-row yxj-rowxb " v-for="(item,index) in data1" :key="index">
					<div class="marbtm fontsize15 zhs">
						<span>{{item.name}}</span>	 
						<span class="color1A5186 fontsize15" v-show="item.realname">执行人:{{item.realname}}</span>
					</div>
					<div class="zhs">
						<div class="colorA3A3A3 fontsize13">编码：{{item.number}}</div>
						<div class="colorA3A3A3 fontsize13">{{getType(item.rate)}}频次</div>
					</div>
					<div class="colorA3A3A3 fontsize13">开始时间：{{item.start_time}}</div>
					<div class="colorA3A3A3 fontsize13" :class="item.ifcolor">最晚完成时间：{{item.expire_time}}</div>
					
					<div>
						<span class="dsh-btn1 btn-submit dsh-btnxb" :data-item="(JSON.stringify(item))" v-if="item.flags">提交</span>
						<span class="dsh-btn dsh-btnxb" v-else>巡检中</span>
					</div>
				</div>
			</div>
			<div v-if="tabindex == 3" class="mui-row yxj-rowxl" v-for="(item,index) in data2" :key="index">
				<div class="yxj-row-3"  @click="getChildPage3(item)" >
					<div class="marbtm flex justcnt">
						<div class="fontsize15 marbtm"  >{{item.name}}</div>
						<div class="color1A5186 fontsize15" v-show="item.realname">执行人:{{item.realname}}</div>
						<div v-if="!item.helpstatus">
							<span class="dsh-btn" @click.stop="getTask(item,'2')" v-if="item.sxlstatus == '0'">巡检中</span>
						</div>
					</div>
					<div class="colorA3A3A3 fontsize13">开始时间：{{item.start_time}}</div>
					<div class="colorA3A3A3 fontsize13" :class="getCheckTime(item.latestcompletetime)">
						最晚完成时间：{{item.latestcompletetime}}
					</div>
				</div>
			</div>
			<div class="wifi" v-if="tabindex == 1 && ifshow"><img src="./../../img/empty_data.png" />
				<p>亲，这里没有数据了哦~</p>
			</div>
			<div class="wifi" v-if="tabindex == 2 && ifshow1"><img src="./../../img/empty_data.png" />
				<p>亲，这里没有数据了哦~</p>
			</div>
			<div class="wifi" v-if="tabindex == 3 && ifshow2"><img src="./../../img/empty_data.png" />
				<p>亲，这里没有数据了哦~</p>
			</div>
		</div>
		<div class="scanfix">
			<img src="../../img/Scan.png" id="scan" style="width: 80px;height: 80px;" />
		</div>
		<script src="../../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../../js/mkeyplus.base.xunjian.js"></script>
		<script src="../../../../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/button-up.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../../../../js/vue.js"></script>
		<script type="text/javascript" src="../../../../js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
		
			var org_code1 = '';
			var islock = false;
			// var firstdaystatus = false; //需要记住第一次天频率的状态，不然第二次天巡检无法判断
			mui.init();
			window.vm = new Vue({
				el: "#content",
				data: {
					data: [],
					data1: [],
					data2: [],
					tabindex: 1,
					ifshow: false,
					ifshow1: false,
					ifshow2: false,
					// firstdaystatus:false,
					listid:'',
					listtype:''
				},
				methods: {
					// getSubmitSb(item){
					// 	if (plus.networkinfo.getCurrentType()  ==  plus.networkinfo.CONNECTION_NONE)  {
					// 		mui.toast('请在有网情况下操作!');
					// 		return;
					// 	}
					// 	console.log('item',JSON.stringify(item));
						
					// },
					getChildPage(item){
						var sbid = item.id;
						var name = item.name;
						var title = name.substring(5);
						var type = item.status;
						var rate = item.rate;
						var status = item.sxlstatus;
						console.log('status=' + status);
						mui.openWindow({
							url: 'weixunjianlist.html',
							id: 'weixunjianlist.html',
							extras: {
								sbid: sbid,
								rate: rate,
								title: title,
								scantype:item.helpstatus,
								offlinetype:'pinci'
							},
							createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
						})
					},
					getChildPage3(item){
						var sbid = item.id;
						var name = item.name;
						var type = item.status;
						var rate = item.rate;
						var status = item.sxlstatus;
						console.log('status=' + status);
						mui.openWindow({
							url: 'weixunjianlist.html',
							id: 'weixunjianlist.html',
							extras: {
								sbid: sbid,
								rate: rate,
								title: name,
								scantype:item.helpstatus,
								offlinetype:'xianlu'
							},
							createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
						})
					},
					getType(type) {
						var ratetext = '';
						if (type == '0') {
							ratetext = '天'
						} else if (type == '1') {
							ratetext = '周'
						} else if (type == '2') {
							ratetext = '月'
						} else if (type == '3') {
							ratetext = '季'
						} else if (type == '4') {
							ratetext = '半年'
						}
						return ratetext;
					},
					changeState: function(cs) {
						var curyear = new Date().getFullYear();
						if (cs && ~cs.indexOf(curyear)) {
							cs = curyear + cs.split(curyear)[1];
						}
						return cs;
					},
					getTabtn(index) {
						vm.tabindex = index;
						if (index == 2) {
							if(vm.ifshow1){
								document.querySelector('.scanfix').style.display = 'none';
							}else{
								document.querySelector('.scanfix').style.display = 'block';
							}
						} else {
							document.querySelector('.scanfix').style.display = 'none';
						}
					},
					getCheckTime(d) {
						var curd = new Date().getTime();
						var actived = 0;
						if (d) {
							actived = new Date(Date.parse(d)).getTime();
							if (actived < curd) {
								return 'red'
							}
							if (actived - curd < 86400000) {
								return 'yellow'
							}
						}
						return 'normal';
					}
				}
			});
			
			mui.plusReady(function() {
				// plus.storage.removeItem('pcchild');
				// plus.storage.removeItem('pc');
				// plus.storage.removeItem('xlchild');
				// plus.storage.removeItem('xl');
				// plus.storage.removeItem('sbchild');
				// plus.storage.removeItem('sb');
				plus.storage.setItem('offline','1');
				
				var org_code = localStorage.getItem('org_code'); //获取缓存中的风场编号
				org_code1 = JSON.parse(org_code);
				console.log('org_code1', org_code1);
				offtype = 'shebei';
				initData();//初始化数据
				buttontijiao();
			})

			 

			function initData() {
				getDateLeft('1');
				getDateLeft('2');
				getDateRight();
			}

			function getData() {
				if (vm.tabindex == '1') {
					getDateLeft('1');
				} else if (vm.tabindex == '3') {
					getDateLeft('2');
				} else {
					getDateRight();
				}
			}

			function getDateLeft(type) {
				if (type == '1') {
					var pc = plus.storage.getItem('pc');
					console.log('频次......' + pc);
					pc = JSON.parse(pc);
					vm.ifshow = false;
					if ((pc && pc.length == 0) || pc == null || pc == 'null') {
						vm.ifshow = true;
					}
					vm.data = pc;
				} else {
					var xl = plus.storage.getItem('xl');
					console.log('线路......' + JSON.stringify(xl));
					xl = JSON.parse(xl);
					vm.ifshow2 = false;
					if ((xl && xl.length == 0) || xl == null || xl == 'null') {
						vm.ifshow2 = true;
					}
					vm.data2 = xl;
				}
			}

			function getDateRight() {
				var sb = plus.storage.getItem('sb');
				console.log('设备.....'+sb);
				sb = JSON.parse(sb);
				vm.ifshow1 = false;
				if ((sb && sb.length == 0) || sb == null || sb == 'null') {
					vm.ifshow1 = true;
					document.querySelector('.scanfix').style.display = 'none';
				}
				vm.data1 = sb;
			}

			//扫码
			document.querySelector('#scan').addEventListener('tap', function() {
				mui.openWindow({
					id: "codersb.html",
					url: "codersb.html",
					extras: {
						// type: rate,
						// xsdwindid:xsdwindid
					},
					waiting: {
						autoShow: false
					}
				});
			})

			
			function getCheckTime(d) {
				var curd = new Date().getTime();
				var actived = 0;
				if (d) {
					actived = new Date(Date.parse(d)).getTime();
					if (actived < curd) {
						return 'red'
					}
					if (actived - curd < 86400000) {
						return 'yellow'
					}
				}
				return 'normal';
			}

			window.addEventListener('refresh', function(e) { //执行刷新
				getData();
			});
		
		</script>
	</body>

</html>
